<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>警报设置</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="warn-setting">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="addWarn">新增警报</el-button>
          <el-button size="medium" type="primary" @click="importExcel">导入Excel</el-button>
          <el-button size="medium" type="primary" @click="updateWarns">批量修改</el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search" :warn-type-list="warnTypeList"></search-form>
        </div>
      </search-btn-view>
      <div class="warn-setting-table-div" :class="{'hasPage':pagination.warnTypeList.length>0}">
        <div v-if="warnObj===null" class="no-data">
          <div>暂无数据</div>
        </div>
        <warn-item v-else ref="warnItem" :warn="warn" :search="oldSearch" :key="'warnType_'+warnType" @delete-success="deleteSuccess"></warn-item>
      </div>
      <div style="margin-top:5px;text-align:right;" v-if="pagination.warnTypeList.length!==0">
        <el-pagination background :page-size="1" :total="pagination.warnTypeList.length" :current-page.sync="pagination.currentPage">
        </el-pagination>
      </div>
    </div>

    <el-dialog :title="formType==='add'?'新增警报设置':'修改警报设置'" :visible.sync="openForm" width="400px" top="calc(50vh - 137px)"
      :close-on-click-modal="false" @closed="formClosed">
      <div style="height: 220px;overflow: auto">
        <warn-form v-if="openForm" :type="formType" :warn="selectWarn" :warn-type-list="warnTypeList" @add-success="addSuccess"></warn-form>
      </div>
    </el-dialog>

    <el-dialog fullscreen class="dialog-fullscreen" title="导入Excel" :visible.sync="openExcel">
      <div style="height:100%;overflow:auto">
        <excel-form v-if="openExcel" @import-success="importSuccess">
          </excelorm>
      </div>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "./css/searchForm.css",
    "./css/warnForm.css",
    "./css/warnItem.css",
    "./css/excelForm.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/sysAutocomplete.js",
    "/vueSystem/components/tableInput.js",
    "/vueSystem/models/baseModel.js"
  ]);

</script>

<script src="https://upload.shinehao.com.cn/20190523111638xlsx.full.min.js"></script>
<script src="../../static/excel/Import2Excel.js"></script>

<script src="../models/warnFormModel.js"></script>
<script src="./searchForm.js"></script>
<script src="./warnForm.js"></script>
<script src="./warnItem.js"></script>
<script src="./excelForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',

    watch: {
      changeData: function () {
        var warnObj = this.warnObj;
        if (warnObj === null) {
          this.warn = null;
          return;
        }

        var warnType = this.warnType;
        if (warnType === '') {
          this.warn = null;
          return;
        }

        var warnList = warnObj[warnType];
        if (!warnList) {
          this.warn = null;
          return;
        }
        this.warn = {
          warnType: warnType,
          warnList: warnList
        };
      }
    },

    computed: {
      warnTypeList: function () {
        var warnObj = this.warnObj;
        if (warnObj === null) {
          return [];
        }
        return _.keys(warnObj);
      },
      warnType: function () {
        var pagination = this.pagination;
        var warnTypeList = pagination.warnTypeList;
        var currentPage = pagination.currentPage;
        var warnType = warnTypeList[currentPage - 1];
        if (warnType === undefined) {
          return '';
        }
        return warnType;
      },
      changeData: function () {
        return {
          warnType: this.warnType,
          warnObj: this.warnObj
        };
      }
    },

    data: function () {
      var search = {
        typeName: '',
        alarmCode: '',
        codeDescribe: '',
        isShow: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        warnObj: null,
        warn: null,
        pagination: {
          currentPage: 1,
          warnTypeList: []
        },
        openForm: false,
        formType: '',
        selectWarn: null,
        openExcel: false
      };
    },

    created: function () {
      this.setWarnObj(true);
    },

    methods: {
      setWarnObj: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        this.loading = true;
        var self = this;
        return ajaxRequest('equipment/getEquipmentAlarmCode').then(function (warnList) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          warnList = _.orderBy(warnList, ['alarmCode'], ['asc']);
          if (warnList.length === 0) {
            self.warnObj = null;
          } else {
            var warnObj = _.groupBy(warnList, 'typeName');
            self.warnObj = warnObj;
          }
          self.toSearchData();
          self.loading = false;
          return warnList;
        }).catch(function () {
          self.loading = false;
          return [];
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.toSearchData();
        this.oldSearch = _.cloneDeep(this.search);
      },

      toSearchData: function () {
        var typeName = this.search.typeName;
        typeName = typeName.toLowerCase();
        var warnTypeList = this.warnTypeList;
        warnTypeList = _.filter(warnTypeList, function (warnType) {
          if (typeName === '') {
            return true;
          }

          warnType = warnType.toLowerCase();
          return warnType.indexOf(typeName) !== -1;
        });

        var currentPage = this.pagination.currentPage;
        if (currentPage > warnTypeList.length) {
          currentPage = warnTypeList.length;
        }

        this.pagination.warnTypeList = warnTypeList;
      },

      addWarn: function () {
        var warnType = this.warnType;
        if (warnType !== '') {
          this.selectWarn = {
            typeName: warnType,
            isShow: 1
          };
        }

        this.formType = 'add';
        this.openForm = true;
      },

      addSuccess: function (warnForm) {
        this.openForm = false;

        var warnObj = this.warnObj;
        if (warnObj === null) {
          this.setWarnObj();
          return;
        }

        var typeName = warnForm.typeName;
        var warnList = warnObj[typeName];
        if (SysUtil.isEmpty(warnList)) {
          this.setWarnObj();
          return;
        }

        var index = _.findIndex(warnList, {
          alarmCode: warnForm.alarmCode,
        });
        if (index > -1) {
          this.setWarnObj();
          return;
        }

        warnList.push(warnForm);
        if (this.$refs['warnItem']) {
          this.$refs['warnItem'].addWarn(warnForm);
        }
      },

      formClosed: function () {
        this.formType = '';
        this.selectWarn = null;
      },

      deleteSuccess: function (warn) {
        var warnObj = this.warnObj;
        var warnType = this.warnType;
        var warnList = warnObj[warnType];
        if (SysUtil.isEmpty(warnList)) {
          return;
        }

        var index = warnList.indexOf(warn);
        if (index > -1) {
          if (warnList.length === 1) {
            this.setWarnObj();
            return;
          }
          warnList.splice(index, 1);
        }
      },

      importExcel: function () {
        this.openExcel = true;
      },

      importSuccess: function () {
        this.openExcel = false;
        this.setWarnObj();
      },

      updateWarns: function () {
        this.loading = true;
        var self = this;
        this.$refs['warnItem'].updateWarns().then(function(flag){
          if (flag) {
            self.setWarnObj();
          }
          self.loading = false;
        }).catch(function(){
          self.loading = false;
        });
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      WarnForm: WarnForm,
      WarnItem: WarnItem,
      ExcelForm: ExcelForm
    }
  });

</script>

<style>
  .warn-setting {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    overflow: auto;
  }

  .warn-setting .warn-setting-table-div {
    position: relative;
    height: calc(100% - 46px);
    overflow: auto;
  }

  .warn-setting .warn-setting-table-div.hasPage {
    height: calc(100% - 83px);
  }

  .warn-setting .el-form-item {
    margin-bottom: 10px;
  }

</style>

</html>
